<template>
  <el-card header="学生年级分布">
    <div id="gradeDistributionChart" style="height: 580px; padding-top: 35px; padding-left: 50px;"></div>
    <div class="chart-footer">
      <el-tag type="info">总人数：{{ totalStudents }}</el-tag>
    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'GradeDistributionChart',
  props: {
    distributionData: {
      type: Array,
      required: true
    }
  },
  computed: {
    totalStudents() {
      return this.distributionData.reduce((total, item) => total + item.value, 0)
    }
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.getElementById('gradeDistributionChart'))
      const option = {
        // 图表配置
      }
      chart.setOption(option)
    }
  },
  mounted() {
    this.initChart()
  }
}
</script>